/*
下面的子vuex模块在外部的基本使用 -- 并不是map映射的方式
state:      this.$store.state.模块名.字段名
mutations:  this.$store.commit('模块名/方法名',实参值)
actions:    this.$store.dispatch('模块名/方法名'，实参值)
getters:    this.$store.getters['模块名/方法名']
*/

const state = {
  appVal: '这是一个寂寞的天',
  xxx2: '测试app模块计算属性'
  /*
基本使用：
  this.$store.state.模块名.字段名
map使用：
   1：导入  import {mapState} from 'vuex'
   2:定义： computed:{
         ...mapState(模块名,['字段名'])
   }
   3：使用：this.字段名
*/
}
const mutations = {
  /*
基本使用：this.$store.commit('模块名/方法名',实参值)
map使用：
   二种使用方式
     一：
       a：导入  import {mapMutations} from 'vuex'
       b:定义  methods:{...mapMutations(['模块名/方法名'])}
       c:调用：
       点语法后面的值要符合命名规范，
        this[模块名/方法名](实参值)
     二：
         a：导入  import {mapMutations} from 'vuex'
         b:定义：  methods:{...mapMutations('模块名',['方法名'])}
         c:调用：  this.方法名(实参值)
 mutations调用mutations
    this===this.$store
    this.commit('模块名/方法名',实参值)

*/

  setAppVal (state, value) {
    state.appVal = value
    this.commit('app/logFN')
  },
  logFN () {
    window.console.log('logFN')
    // this.$store.commit('模块名/方法名')
  }
}

const actions = {
  /*
  外部使用
    actions基本使用：this.$store.dispatch('模块名/方法名',实参值)
    map用法:
        a:导入  import {mapActions} from 'vuex'
        b:定义
           methods:{
               ...mapActions(['模块名/方法名'])
           }
        c:调用
          this['模块名/方法名'](实参值)

        a:导入  import {mapActions} from 'vuex'
        b:定义
           methods:{
               ...mapActions('模块名',['方法名'])
           }
        c:调用
          this.方法名(实参值)

内部使用：
   store:{
       state:当前模块的state   state.字段名
       rootState:根模块下的state    rootState.模块名.字段名
       getters:当前模块的getters    getters.方法名
       rootGetters:根模块下的getters   rootGetters['模块名/方法名']
       commit:调用mutations方法的    
            本模块：  commit('方法名',实参值)
            其它模块：  commit('模块名/方法名',实参值,{root:true})
       dispatch:调用actions方法的
            本模块：  dispatch('方法名',实参值)
            其它模块：  dispatch('模块名/方法名',实参值,{root:true})
   }







    actions调用本模块的state数据   store.state.字段名
    actions调用其它模块的state数据    store.rootState.模块名.字段名
    actions调用本模块的getters     store.getters.方法名
    actions调用其它模块的getters    store.rootGetters['模块名/方法名']/store.rootGetters.方法名
    actions调用本模块的mutations   store.commit('方法名',实参值)
    actions调用其它模块(namespaced:true)的mutations  store.commit('模块名/方法名',实参值,{root:true})
     actions调用本模块的actions      store.dispatch('方法名',实参值)
   actions调用其它模块(namespaced:true)的actions   store.dispatch('模块名/方法名',实参值,{root:true})

    
    */

  refreshAppVal (store) {
    /*
    store:
      commit:调用mutations方法的
      dispatch:调用actions方法的
      getters:只调用模块的getters
      rootGetters:调用根模块下的getters(可以调用所有的getters)
      state:当前模块的state
      rootState:根模块下的state(可以访问所有state)
    */

    window.console.log('state:', store.state.appVal)
    window.console.log('其它模块的state:', store.rootState.login.loginState)
    window.console.log('getters:', store.getters.getXxx2)
    window.console.log('根模块下的getters', store.rootGetters.getTest)
    window.console.log(
      '其它命名空间下的模块的getters',
      store.rootGetters['login/getLoginState']
    )
    store.commit('login/loginLog', null, { root: true })
    store.dispatch('appTestActions')
    store.dispatch('login/refreshLoginState', null, { root: true })
    window.console.log(store)
    setTimeout(() => {
      store.commit('setAppVal', Math.random() * 999)
    }, 2000)
  },
  appTestActions () {
    window.console.log('appTestActions')
  }
}

const getters = {
  /*
    基本调用：this.$store.getters['模块名/方法名']
    map使用:
        a:导入  import {mapGetters} from 'vuex'
        b:定义
           computed:{
               ...mapGetters({
                   方法名:'模块名/方法名'
               })
           }
           定义：
           computed:{
               ...mapGetters('模块名',['方法名'])
           }
        c:使用：
          this.方法名
    */
  getAppVal (state, getters, rootState, rootGetters) {
    /*
    state:当前模块的state数据
    getters：当前模块的getters
    rootState:根模块下的state(包含所有模块下的state)
    rootGetters:根模块下的getters(包含所有模块下的getters)    
    */
    window.console.log(state, getters, rootState, rootGetters)

    // state===this.$store.state.模块名
    // return state.appVal
    // return rootState.app.appVal + getters.getXxx2
    return rootState.app.appVal + rootGetters['app/getXxx2']
  },
  getXxx2 (state) {
    return state.xxx2
  }
}

// 默认导出  namespaced: true, 这个属性必须为true
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}
